<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        window.onload=function (){
            $.get(url+"emp/all",function(data){
                let str=''
                $.each(data,function(i,obj){
                    str+=`<tr>
        <td>${obj.empno}</td>
        <td>${obj.ename}</td>
        <td>${obj.sal}</td>
        <td>
            <a href="update.html?id=${obj.empno}"><img src="${url}pic/${obj.epic}" alt="" width="100" height="100"></a>
        </td>
        <td>
            <!--            目前只是跳转没有传递数据-->
            <a href="update.html?id=${obj.empno}">修改</a>
            <a href="javascript:;" onclick="del(${obj.empno},this)">删除</a>
        </td>
    </tr>`;
                });
                $("tbody").html(str)
            },"json")
        }
        function del(id,obj){
            let f=confirm("确定删除吗?")
            if (f){
                $.get(url+"emp/del",{id:id},function(data){
                    if (data==1){
                        alert("删除成功")
                        obj.parentNode.parentNode.remove()
                    }else{
                        alert("删除失败")
                    }
                })
            }else{
                alert("取消删除")
            }
        }
    </script>
</head>
<body>
<!--border表示边界为1px，1个像素-->
<table border="1">
    <!--    caption表示表格标题-->
    <caption>员工列表</caption>
    <!--    <thead>表示表头-->
    <thead>
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工电话</th>
        <th>头像</th>
        <th>操作
            <a href="insert.html"></a>
        </th>
    </tr>
    </thead>
    <tbody>
    <!--    tr*2>td*4 tab键-->
    <tr>
        <td>1</td>
        <td>李总</td>
        <td>12345</td>
        <td>
            <a href="update.html?id=1"><img src="../img/hacker.jpg" alt="" width="100" height="100"></a>
        </td>
        <td>
            <!--            目前只是跳转没有传递数据-->
            <a href="update.html?id=1">修改</a>
            <a href="javascript:alert('确定删除吗')">删除</a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>李总</td>
        <td>12345</td>
        <td>
            <a href="update.html?id=1"><img src="../img/hacker.jpg" alt="" width="100" height="100"></a>
        </td>
        <td>
            <!--            目前只是跳转没有传递数据-->
            <a href="update.html?id=1">修改</a>
            <a href="javascript:alert('确定删除吗')">删除</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>